<template>
	<view class="pages">
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view class="uniBtn navs">
				<view v-for="(item,index) in navList" :key="index" :class="{'navbox':type==item.id}" @click="tabs(item.id)">{{item.name}}({{item.count}})</view>
				<!-- <view :class="{'navbox':type==1}" @click="tabs(1)">好评(1)</view>
				<view :class="{'navbox':type==2}" @click="tabs(2)">中评(1)</view>
				<view :class="{'navbox':type==3}" @click="tabs(3)">差评(1)</view> -->
			</view>
			
			<view v-if="list.length == 0">
				<view style="height: 100rpx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes" v-for="(item,index) in list" :key="index">
				<view class="uniFlex head">
					<image :src="item.avatar" mode=""></image>
					<view>{{item.nickname}}</view>
				</view>
				<view class="box">
					<view class="uniBtn b1">
						<view>已购 {{name}}</view>
						<view>{{item.create_time}}</view>
					</view>
					<view class="b2">{{item.comment}}</view>
					<view class="b3">
						<image v-for="(x,y) in item.image" :key="y" :src="x" mode=""></image>
						<!-- <image src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode=""></image>
						<image src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode=""></image>
						<image src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode=""></image> -->
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				name:'',
				navList:[],
				type:'',
				
				page: 1,
				limit: 20,
				length: true,
				list:[]
			}
		},
		async onLoad(options) {
			this.id = options.id;
			this.name = options.name;
			let res = await this.$api.commentCategory({goods_id:options.id});
			if(res.code == 1){
				// console.log(res)
				this.navList = res.data.comment;
				this.type = res.data.comment[0].id;
				await this.getList();
			}
			
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉')
				// 关闭下拉
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 切换
			tabs(id){
				this.type = id;
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 列表
			async getList() {
				let res = await this.$api.commentlists({
					goods_id:this.id,
					id:this.type,
					page_no: this.page,
					page_size: this.limit,
				});
				if (res.code == 1) {
					this.length = res.data.lists.length == this.limit;
					this.list.push(...res.data.lists);
					// 关闭下拉
					uni.stopPullDownRefresh();
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.pages{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	.contentbox{
		flex: 1;
		overflow: hidden;
		padding: 30rpx 0;
		
		.navs{
			margin:0 50rpx;
			font-size: 28rpx;
			color: #000000;
			font-weight: bold;
			
			view{
				padding-bottom: 20rpx;
			}
			
			.navbox{
				color: #AA3128;
			}
		}
		.boxes{
			padding: 30rpx 25rpx 30rpx 50rpx;
			
			.head{
				font-weight: bold;
				image{
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}
			}
			.box{
				background-color: #fff;
				padding: 30rpx 25rpx 0 25rpx;
				margin-left: 26rpx;
				margin-top: 26rpx;
				border-radius: 5rpx;
				
				.b1{
					color: #6F6F6F;
				}
				.b2{
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					line-height: 170%;
					margin: 10rpx 0;
				}
				.b3{
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
					
					image{
						width: 180rpx;
						height: 180rpx;
						margin-right: 30rpx;
						margin-bottom: 30rpx;
						border-radius: 10rpx;
						
						&:nth-child(3n) {
							margin-right: 0upx;
						}
					}
				}
			}
		}
	}
	
</style>